<template>
    <div class="content">
        <div id="meta2d"></div>
    </div>
</template>

<script setup>
import { Meta2d, } from '@meta2d/core';
import { onMounted, ref, onUnmounted } from 'vue';
let meta2d = null;


const open = () => {
    let url = '/mard2d/meta2d.2025923093525.json';
    _fetch(url, function (text) {
        var data = JSON.parse(text);
        data.locked = 1;
        data.rule = false;
        globalThis.userId = data.userId;
        meta2d.open(data);
    });
}

function _fetch(url, cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            cb && cb(xhr.responseText);
        }
    };
}

const opened = () => {
    meta2d.fitView(true, 0); //充满屏幕
}
onMounted(async () => {
    const options = {
        // width: 1920,
        // height: 1080,
        // background: '#1e2430',
        // color: '#bdc7db',
        background: '#fff',
        color: '#000',
        width: undefined,
        height: undefined
    }
    meta2d = new Meta2d('meta2d', options);
    //注册基本图形库
    // registerBasicDiagram();
    meta2d.on('opened', opened);
    open();
});

onUnmounted(() => {
    meta2d?.off('opened', opened);
    meta2d?.destroy();
});
</script>
<style scoped>
#meta2d {
    position: absolute !important;
    width: 100%;
    height: 100%;
    touch-action: none;
    overflow: hidden;
}
</style>